<script setup lang="ts">
    import { ref, onMounted, nextTick, computed, provide } from 'vue';
    import { userSessionStore } from '@/stores/session';
    import { useChatStore } from '@/stores/chat';

    import ChatContentItem from '@/components/ChatBox/Content/List/Item/index.vue';

    const chatStore = useChatStore();
    const sessionStore = userSessionStore();

    const messageListRef = ref();
    const messageItemRef = ref();

    const messageData = computed(() => chatStore.chatMessageList);

    const currentSessionId = computed(() => sessionStore.currentSession.session_id);

    // 监控滚动条，是否加载最新数据
    const onScroll = async () => {
        if(!!chatStore.chatMessageList.length && messageListRef.value && messageListRef.value.scrollTop == 0) {
            const oldIndex = messageListRef.value.scrollHeight;
            // 获取聊天信息
            await chatStore.getMessageList(currentSessionId.value);
            messageListRef.value.scrollTop = messageListRef.value.scrollHeight - oldIndex;
        }
    }

    onMounted(() => {
        nextTick(() => {
            chatStore.chatListToBottomAction = () => {
                setTimeout(() => {
                    goToBottom();
                });
            }
        })
    });

    /**
     * 滚动到指定偏移量
     * @param offset 滚动条偏移量
     */
    const scrollToOffset = (offset: number, smooth = false) => {
        if (messageListRef.value) {
            messageListRef.value.scroll({
                left: 0,
                top: offset,
                behavior: smooth ? 'smooth' : 'auto',
            })
        }
    }

    // 提供 ref 给子组件使用
    provide('messageItemRef', messageItemRef)
    // 提供方法给子组件使用
    provide("scrollToOffset", scrollToOffset);

    // 回到底部
    const goToBottom = () => {
        if (messageListRef.value) {
            messageListRef.value.scrollTo({ top: messageListRef.value.scrollHeight });
        }
    }

</script>
<template>
    <div class="message-list" ref="messageListRef" @scroll="onScroll">
        <div class="loading" v-if="chatStore.isLoading">
            <el-icon class="is-loading"><Loading /></el-icon>&nbsp;消息加载中
        </div>
        <div class="content" ref="messageItemRef">
            <chat-content-item 
                v-for="(item, index) in messageData" 
                :id="item.message.id"
                :item="item" 
                :key="index" 
            />
        </div>
    </div>
</template>
<style lang="less" scoped>
    .message-list {
        width: 100%;
        height: 493px;
        overflow-y: auto;
        & .loading {
            margin-top: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    /* 定义滚动条样式 */
    .message-list::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background: white;
        opacity: 0;
    }
    /*定义滚动条轨道*/
    .message-list::-webkit-scrollbar-track {
        box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
        border-radius: 10px;
        background: white;
        opacity: 0;
    }
    /*定义滑块*/
    .message-list::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 0px rgba(118, 118, 118, 0.5);
        background-color: rgba(118, 118, 118, 0.5);
    }
</style>